<template>
  <div class="idle_detail">
    <head-top head-title="我的发布" goBack="true"></head-top>
    <div class="help_top">
      <div class="help_title border-bottom">
        <img :src="list.head_pic" alt="">
        <div class="help_msg">
          <div class="msg_top">
            <p>{{list.nickname}}</p>
          </div>
          <div class="msg_bottom">
            <p>{{placeName+'-'+list.areas_name}}</p>
            <div class="telphone" v-if="list.phone">
              <a :href="'tel:'+list.phone" class="tel">
                <span class="phone-image"></span>{{list.phone}}</a>
            </div>
            <div class="telphone" v-else></div>
          </div>
        </div>
      </div>
    </div>
    <desc-pic :list="list"></desc-pic>
    <div class="money border-bottom" v-if="list.money">
      <span>￥{{list.money}}</span>
    </div>
    <div v-else></div>
    <div class="message_bottom" v-if="flag">
      <span>发布时间：{{list.create_time * 1000 | dateFmt(('YYYY-MM-DD HH:mm:ss'))}}</span>
      <span>浏览人数：{{list.reading_amount}}</span>
    </div>
    <div class="line"></div>
    <comment :list="list" :lists="lists" @passMethods="getIdleDetail" v-if="flag"></comment>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .idle_detail {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    .help_top {
      width: 100%;
      .help_title {
        width: 100%;
        height: 65px;
        img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          float: left;
          margin-top: 10px;
          margin-left: 10px;
        }
        .help_msg {
          float: right;
          width: 83%;
          height: 65px;
          .msg_top {
            width: 100%;
            height: 33px;
            p:first-child {
              float: left;
              font-size: 15px;
              line-height: 33px;
            }
          }
          .msg_bottom {
            width: 100%;
            height: 32px;
            p {
              float: left;
              line-height: 32px;
              font-size: 13px;
              color: #808080;
            }
            .telphone {
              float: right;
              margin-right: 10px;
              line-height: 32px;
              .tel {
                color: #555;
                font-size: 12px;
                vertical-align: middle;
                .phone-image {
                  display: inline-block;
                  width: 15px;
                  height: 15px;
                  padding-right: 5px;
                  background-size: 15px 15px;
                  background-repeat: no-repeat;
                  @include bgimg('../home/images/dianhua');
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }
    .idle_title {
      width: 100%;
      height: 65px;
      border-bottom: 1px solid #d7d7d7;
      img {
        width: 44px;
        height: 44px;
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        border-radius: 50%;
      }
      .icon_des {
        float: left;
        margin-left: 10px;
        h3 {
          font-size: 15px;
          font-weight: normal;
          line-height: 37px;
        }
        p {
          color: #808080;
          font-size: 13px;
        }
      }
    }
    .money {
      width: 100%;
      height: 20px;
      // border-bottom: 1px solid #d7d7d7;
      span {
        font-size: 12px;
        color: red;
        line-height: 20px;
        margin-left: 10px;
      }
    }
    .message_bottom {
      width: 100%;
      height: 44px;
      line-height: 44px;
      span:first-child {
        font-size: 13px;
        color: #999;
        float: left;
        margin-left: 10px;
      }
      span:last-child {
        font-size: 13px;
        color: #999;
        float: right;
        margin-right: 10px;
      }
    }
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
    .goods_detail {
      width: 100%;
      .goods_title {
        width: 100%;
        height: 44px;
        span {
          font-size: 15px;
          line-height: 44px;
          margin-left: 10px;
        }
      }
      .goods_image {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
        img {
          width: 96%;
          height: 210px;
          border-radius: 5px;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import avatar from '../common/avatar.vue'
  import comment from '../common/comment.vue'
  import descPic from '../common/desPic.vue'
  import data from '../../../static/data.json'

  export default {
    name: 'IdleDetail',
    data () {
      return {
        lists: [],
        list: {},
        flag: false,
        province: '',
        city: '',
        district: '',
        placeName: ''
      }
    },
    created () {
      this.getIdleDetail()
    },
    methods: {
      getIdleDetail () {
        const url = `${commonUrl.apihost}index.php/home/personal/getMyDetail/?name=${this.$route.params.name}&id=${this.$route.params.id}`
        this.$http.get(url).then(res => {
          if (res.data.code === 200) {
            this.lists = res.data.data.comment
            this.list = res.data.data.info
            this.flag = true
            this.province = this.list.province // 省
            this.city = this.list.city // 市
            this.district = this.list.district // 区
            for (var j = 0; j < data.length; j++) {
              if (this.province == data[j].code) {
                var pName = data[j].name // 省
                var cdata = data[j].childs
                cdata.map(res => {
                  if (this.city == res.code) {
                    var cName = res.name // 市
                    var adata = res.childs
                    adata.map(res => {
                      if (this.district == res.code) {
                        var aName = res.name// 区
                        this.placeName = pName + '-' + cName + '-' + aName
                      }
                    })
                  }
                })
              }
            }
          }
        })
      }
    },
    components: {
      headTop,
      avatar,
      comment,
      descPic
    }
  }
</script>
